<template>
  <div>
    <el-dialog title="出库详情" :visible.sync="viewDialogVisible" width="60%" @close="isShowMore = false">
      <div class="content-box" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.9)">
        <div ref="content" :class="[isShowMore ? 'open' : '', 'content']">
          <!-- 标准化产品 -->
          <div v-show="state == 1">
            <el-row style="border-top: #e4e7ed solid 1px">
              <el-col :span="6">产品名称</el-col>
              <el-col :span="10">{{ rowData.name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品归属</el-col>
              <el-col :span="10">{{ rowData.headOrSubCompanyTypeName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">所属公司</el-col>
              <el-col :span="10">{{ applicantDeptName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品分类</el-col>
              <el-col :span="10">{{ rowData.productCategory }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">应用领域</el-col>
              <el-col :span="10">{{ rowData.applicationField }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">联系人</el-col>
              <el-col :span="6">{{ rowData.head }}</el-col>
              <el-col :span="4" style="border-left: #e4e7ed solid 1px; border-right: #e4e7ed solid 1px; text-align: right; padding-right: 6px">联系电话</el-col>
              <el-col :span="6" style="padding-left: 6px">{{ rowData.phone }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品描述</el-col>
              <el-col :span="10">{{ rowData.description }}</el-col>
            </el-row>
            <el-row style="line-height: 90px">
              <el-col :span="6" style="height: 117px">产品资费</el-col>
              <el-col style="width: 600px">
                <el-descriptions direction="vertical" :column="2" border>
                  <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="资费级别">{{ rowData.profitModel | filtersGrade }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="资费金额"> {{ rowData.profitModel }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品亮点</el-col>
              <el-col :span="10">{{ '找不到对应参数' }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">成功案例</el-col>
              <el-col :span="10">{{ rowData.cases }}</el-col>
            </el-row>
          </div>
          <!-- 应用解决方案 -->
          <div v-show="state == 2">
            <el-row style="border-top: #e4e7ed solid 1px">
              <el-col :span="6">解决方案名称</el-col>
              <el-col :span="10">{{ rowData.name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品归属</el-col>
              <el-col :span="10">{{ rowData.headOrSubCompanyTypeName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">所属公司</el-col>
              <el-col :span="10">{{ applicantDeptName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品分类</el-col>
              <el-col :span="10">{{ rowData.productCategory }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">应用领域</el-col>
              <el-col :span="10">{{ rowData.applicationField }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">联系人</el-col>
              <el-col :span="6">{{ rowData.head }}</el-col>
              <el-col :span="4" style="border-left: #e4e7ed solid 1px; border-right: #e4e7ed solid 1px; text-align: right; padding-right: 6px">联系电话</el-col>
              <el-col :span="6" style="padding-left: 6px">{{ rowData.phone }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">行业分析或趋势分析</el-col>
              <el-col :span="10">{{ rowData.profitModel }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">客户需求或痛点</el-col>
              <el-col :span="14">{{ rowData.type }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">解决方案描述</el-col>
              <el-col :span="10">{{ rowData.description }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">方案优势对比及应用场景</el-col>
              <el-col :span="10">{{ rowData.highlights }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">案例介绍</el-col>
              <el-col :span="10">{{ rowData.cases }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">商务模式/合作模式</el-col>
              <el-col :span="10">{{ rowData.operationMode }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">市场前景预测（目标客户群体）</el-col>
              <el-col :span="10">{{ rowData.targetCustomers }}</el-col>
            </el-row>
          </div>
          <!-- 运营平台产品 -->
          <div v-show="state == 3">
            <el-row style="border-top: #e4e7ed solid 1px">
              <el-col :span="6">产品名称</el-col>
              <el-col :span="10">{{ rowData.name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品归属</el-col>
              <el-col :span="10">{{ rowData.headOrSubCompanyTypeName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">所属公司</el-col>
              <el-col :span="10">{{ applicantDeptName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品分类</el-col>
              <el-col :span="10">{{ rowData.productCategory }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">应用领域</el-col>
              <el-col :span="10">{{ rowData.applicationField }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">联系人</el-col>
              <el-col :span="6">{{ rowData.head }}</el-col>
              <el-col :span="4" style="border-left: #e4e7ed solid 1px; border-right: #e4e7ed solid 1px; text-align: right; padding-right: 6px">联系电话</el-col>
              <el-col :span="6" style="padding-left: 6px">{{ rowData.phone }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品描述</el-col>
              <el-col :span="10">{{ rowData.description }}</el-col>
            </el-row>
            <el-row style="line-height: 90px">
              <el-col :span="6" style="height: 117px">产品资费</el-col>
              <el-col style="width: 600px">
                <el-descriptions direction="vertical" :column="2" border>
                  <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="资费级别">{{ rowData.profitModel | filtersGrade }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="资费金额"> {{ rowData.profitModel | filtersMoney }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品亮点</el-col>
              <el-col :span="10">{{ '找不到对应参数' }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">成功案例</el-col>
              <el-col :span="10">{{ rowData.cases }}</el-col>
            </el-row>
          </div>
          <!-- 核心能力服务 -->
          <div v-show="state == 4">
            <el-row style="border-top: #e4e7ed solid 1px">
              <el-col :span="6">核心能力</el-col>
              <el-col :span="10">{{ rowData.name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品归属</el-col>
              <el-col :span="10">{{ rowData.headOrSubCompanyTypeName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">所属公司</el-col>
              <el-col :span="10">{{ applicantDeptName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">产品分类</el-col>
              <el-col :span="10">{{ rowData.productCategory }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">应用领域</el-col>
              <el-col :span="10">{{ rowData.applicationField }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">联系人</el-col>
              <el-col :span="6">{{ rowData.head }}</el-col>
              <el-col :span="4" style="border-left: #e4e7ed solid 1px; border-right: #e4e7ed solid 1px; text-align: right; padding-right: 6px">联系电话</el-col>
              <el-col :span="6" style="padding-left: 6px">{{ rowData.phone }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">亮点</el-col>
              <el-col :span="10">{{ rowData.applicationField }}</el-col>
            </el-row>
          </div>
        </div>
        <div class="showMoreBtn">
          <el-button type="text" @click="showMore">{{ isShowMore ? '隐藏信息' : '查看更多信息' }}</el-button>
        </div>
      </div>
      <!-- 产品审核状态过程区域 -->
      <div v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.9)">
        <el-timeline reverse>
          <el-timeline-item :timestamp="createTime" placement="top">
            <el-card>
              <h4>提交申请</h4>
              <p>提交人员 : {{ applicantUserName }}</p>
              <p>已提交申请 审核人员 : {{ reviewUserName }}</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(item, index) in processArr" :key="index" :timestamp="item.createTime" placement="top">
            <el-card>
              <h4>
                {{ item.typeName }}<span :style="item.state == '0' ? 'color:blue' : item.state == '1' ? 'color:green' : 'color:red'"> ({{ item.state | filtersStr }})</span>
              </h4>
              <p>
                <span>{{ item.state | filterState }}&nbsp; &nbsp;</span>审核人员 : {{ item.reviewUserName }}
              </p>
              <p>备注 : {{ item.contents }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail } from '@/api/productApi.js'

export default {
  data() {
    return {
      viewDialogVisible: false,
      isShowMore: false, //是否查看更多信息
      rowData: {}, //产品出库详情数据
      state: 0,
      isLoading: false,
      applicantDeptName: '',
      applicantUserName: '',
      reviewUserName: '',
      createTime: '',
      processArr: [], //审核过程
    }
  },
  created() {},
  mounted() {},
  filters: {
    //  状态码转换状态文字 0(审核中) 1(已通过) 2(未通过)
    filterState: (val) => {
      if (val == '0') {
        return '审核中'
      } else if (val == '1') {
        return '已审核'
      } else if (val == '2') {
        return '未通过'
      }
    },
    filtersStr: (val) => {
      if (val == '0') {
        return '正在进行'
      } else if (val == '1') {
        return '已通过'
      } else if (val == '2') {
        return '未通过'
      }
    },
    filtersGrade: (val) => {
      let arr = val.split(',')
      return arr
    },
  },
  methods: {
    openDialog(row) {
      this.isLoading = true
      //   console.log(row, 9999)
      let paoductId = row.id
      getDetail(paoductId).then((res) => {
        this.rowData = res.data.data.productsResult
        this.applicantDeptName = res.data.data.applicantDeptName
        this.applicantUserName = res.data.data.applicantUserName
        this.reviewUserName = res.data.data.reviewUserName
        this.createTime = res.data.data.createTime
        // 审核过程的数据结构不符,需重构
        let list = res.data.data.reviewFlowItemsDetailResults
        // 清空数据防止累加
        this.processArr = []
        list.forEach((e) => {
          if (e.reviewStaffRecordsResults.length > 0) {
            e.reviewStaffRecordsResults.forEach((v) => {
              this.processArr.push(v)
            })
          }
        })
        // console.log(this.processArr, '?????')
        switch (this.rowData.productCategory) {
          case '标准化产品':
            this.state = 1
            break
          case '应用解决方案':
            this.state = 2
            break
          case '运营平台产品':
            this.state = 3
            break
          case '核心能力服务':
            this.state = 4
            break
        }
      })
      this.viewDialogVisible = true
      setTimeout(() => (this.isLoading = false), 1000)
    },
    showMore() {
      this.isShowMore = !this.isShowMore
    },
  },
}
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  .content {
    width: 100%;
    height: 134px;
    overflow: hidden;
    margin-bottom: 14px;
    .el-row {
      border-left: #e4e7ed solid 1px;
      border-right: #e4e7ed solid 1px;
      border-bottom: #e4e7ed solid 1px;
      .el-col {
        height: 100%;
        padding: 12px 0;
      }
      .el-col:nth-child(1) {
        text-align: right;
        border-right: 1px #e4e7ed solid;
        padding-right: 6px;
      }
      .el-col:nth-child(2) {
        padding-left: 6px;
      }
    }
  }
  .showMoreBtn {
    width: 100%;
    height: 40px;
    text-align: center;
    button {
      font-size: 17px;
      font-weight: 550;
      color: #337ab7;
    }
    button:hover {
      opacity: 0.7;
    }
  }
  .open {
    animation-duration: 500ms;
    animation-name: show;
    animation-fill-mode: forwards;
    transition: height 500ms;
    -webkit-transition: height 500; /* Safari */
  }
}
@keyframes show {
  0% {
    height: 134px;
  }
  100% {
    height: 100%;
  }
}
.el-card__body {
  padding: 0 !important;
}
</style>